<script setup>
import {ref} from "vue";
import useStore from "@/store"

const {homeStore} = useStore()

const keywords = ref("")
const active = ref(0)
const hotList = ref([
  "李奥剪头了吗",
  "李奥喜欢黑丝还是白丝",
  "李奥今天学习了吗",
])

const hotList2 = ref([
  "李奥为什么那么硬气",
  "李奥是篮球之神",
  "李奥尿裤子了吗",
])

const onSearch = () => {
  console.log("search")
}

const back = () => {
  $bus.emit("updatePlayStatus")
  homeStore.updateLeftWidth(-300)
}

</script>

<template>
  <div class="w-[100vw] bg-[#151724] overflow-auto text-[#fff]">
    <!--搜索-->
    <van-search background="#151724" v-model="keywords" show-action placeholder="请输入搜索关键词" @search="onSearch"
                class="search">
      <template #action>
        <div class="px-[8px] flex items-cneter text-[#fff]">
          搜索
        </div>
      </template>
      <template #left>
        <div class="px-[10px] items-cneter" @click="back">
          <van-icon name="arrow-left" color="#fff" size="22"/>
        </div>
      </template>
    </van-search>
    <!--历史记录-->
    <div>
      <div v-for="item in 2" class="flex justify-between px-[20px] py-[12px]">
        <div>
          <van-icon name="clock-o" class="mr-[5px]"/>
          <span>历史记录</span>
        </div>
        <div>
          <van-icon name="cross"/>
        </div>
      </div>
    </div>
    <!--猜你想搜-->
    <div class="p-[20px]">
      <div class="flex justify-between text-[#bababb]">
        <span>猜你想搜</span>
        <div>
          <van-icon name="replay" class="mr-[5px]"/>
          <span>换一换</span>
        </div>
      </div>
      <div class="search-want mt-[15px] text-[16px]">
        <div v-for="item in 6">
          听说阿李最近喜欢黑丝
        </div>
      </div>
    </div>
    <!--榜单-->
    <van-tabs v-model:active="active" shrink>
      <van-tab title="抖音热榜">
        <div class="p-[15px] list m-[15px]">
          <template v-for="item in 10">
            <div v-for="item in hotList" class="flex justify-between mb-[15px]">
              <span>{{ item }}</span>
              <span class="text-[#bababb] text-[12px]">9999w</span>
            </div>
          </template>
        </div>
      </van-tab>
      <van-tab title="直播榜">
        <div class="p-[15px] list m-[15px]">
          <template v-for="item in 10">
            <div v-for="item in hotList2" class="flex justify-between mb-[15px]">
              <span>{{ item }}</span>
              <span class="text-[#bababb] text-[12px]">9999w</span>
            </div>
          </template>
        </div>
      </van-tab>
      <van-tab title="音乐榜">
        <div class="p-[15px] list m-[15px]">
          <template v-for="item in 10">
            <div v-for="item in hotList" class="flex justify-between mb-[15px]">
              <span>{{ item }}</span>
              <span class="text-[#bababb] text-[12px]">9999w</span>
            </div>
          </template>
        </div>
      </van-tab>
      <van-tab title="品牌榜">
        <div class="p-[15px] list m-[15px]">
          <template v-for="item in 10">
            <div v-for="item in hotList2" class="flex justify-between mb-[15px]">
              <span>{{ item }}</span>
              <span class="text-[#bababb] text-[12px]">9999w</span>
            </div>
          </template>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<style scoped lang="scss">
:deep(.van-search__content) {
  background: #242532;
}

:deep(.van-field__control) {
  color: #fff
}

.search-want {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: 1fr 1fr;
}

:deep(.van-tabs__wrap) {
  position: relative !important;
}

.list {
  background: linear-gradient(to right, #201d24, #321d26);
}

.search {
  position: sticky;
  top: 0;
  z-index: 9999;
  background: #151724 !important;
}
</style>
